@import '@/styles/variables.scss';

.sidebarItem{
  display: flex;
  align-items: center;
  padding: 0 $block-x;
  border-bottom: 0.5px $border-color solid;
  height: 50px;

  img{
    height: 16px;
    width: 16px;
  }

  .icon-font{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: $block-x;
    .icon{
      font-size: $font-size-title;
      color: $font-color-info;
    }
  }
  .title-content{
    font-size: $font-size-title;
    color: $font-color-main;
  }
  &:hover{
    cursor: pointer;
  }

}

.active{
  background-color: $left-menu-active-bg;
  border-left: 2px solid $main-color;
  .title-content{
    color: $main-color;
  }
  .icon-font{
    .icon{
      color: $main-color;
    }
  }
}

// @media screen and (max-width: 800px) {
//   .title-content {
//       display: none;
//   }
// }
